<template>
  <layout>
    <!-- 头部导航栏 -->
    <template #header>
      <nav-bar-search placeholder="请输入楼盘名或地址" :value="name" @click.native="toSearch" />
    </template>
    <!-- 下拉菜单 区域 -->
    <van-sticky :offset-top="46">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
    </van-sticky>
    <!-- 列表 区域 -->
    <list :type="type" :name="name" />
  </layout>
</template>

<script>
import Layout from '@/views/layout/index'
import NavBarSearch from '@/views/layout/components/NavBarSearch'
import List from '@/components/House/index'
import { DropdownMenu, DropdownItem, Sticky } from 'vant'
export default {
  name: 'HouseList',
  components: {
    Layout,
    List,
    NavBarSearch,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Sticky.name]: Sticky
  },
  data() {
    return {
      type: '',
      name: '',
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部楼盘', value: 0 },
        { text: '新款楼盘', value: 1 },
        { text: '活动楼盘', value: 2 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ]
    }
  },
  beforeRouteEnter(to, from, next) {
    // 进入之前缓存本组件，解决第一次不缓存列表页的问题
    next((vm) => {
      vm.$store.commit('permission/SET_INCLUDELIST', ['Home', 'HouseList', 'SearchHouse'])
    })
  },
  beforeRouteLeave(to, from, next) {
    // 跳转到详情页时缓存当前列表页，反之不缓存
    if (to.path.indexOf('/house/detail') > -1 || to.path.indexOf('/search/house') > -1) {
      this.$store.commit('permission/SET_INCLUDELIST', ['Home', 'HouseList', 'SearchHouse'])
    } else {
      this.$store.commit('permission/SET_INCLUDELIST', [])
      this.$destroy() // 销毁vue实例
    }
    next()
  },
  created() {
    const { type, name } = this.$route.query
    this.type = type
    this.name = name
  },
  methods: {
    toSearch() {
      this.$router.push({ name: 'SearchHouse' })
    }
  }
}
</script>

<style scoped lang="less">
.van-icon-arrow-left {
  font-size: @nav-bar-arrow-size;
  padding-right: 10px;
}
</style>
